import { type ExtractPropTypes, type InjectionKey } from 'vue'
import {
    baseProps,
    makeBooleanProp,
    makeNumberProp,
    makeNumericProp,
    makeStringProp,
} from '../common/props'
import type { TabbarItem } from '../wd-tabbar-item/types'

type TabbarShape = 'default' | 'round'

export type TabbarProvide = {
    props: {
        // 选中标签的索引值或者名称
        modelValue?: number | string
        // 是否固定在底部
        fixed?: boolean
        // 是否设置底部安全距离（iphone X 类型的机型）
        safeAreaInsetBottom?: boolean
        // 是否显示顶部边框
        bordered?: boolean
        // 标签栏的形状。可选项：default/round
        shape?: TabbarShape
        // 激活标签的颜色
        activeColor?: string
        // 未激活标签的颜色
        inactiveColor?: string
        // 固定在底部时，是否在标签位置生成一个等高的占位元素
        placeholder?: boolean
        // 自定义组件的层级
        zIndex?: number
    }
    setChange: (child: TabbarItem) => void
}

export const TABBAR_KEY: InjectionKey<TabbarProvide> = Symbol('wd-tabbar')

export const tabbarProps = {
    ...baseProps,
    /**
     * 选中标签的索引值或者名称
     */
    modelValue: makeNumericProp(0),
    /**
     * 是否固定在底部
     */
    fixed: makeBooleanProp(false),
    /**
     * 是否显示顶部边框
     */
    bordered: makeBooleanProp(true),
    /**
     * 是否设置底部安全距离（iPhone X 类型的机型）
     */
    safeAreaInsetBottom: makeBooleanProp(false),
    /**
     * 标签栏的形状。可选项：default/round
     */
    shape: makeStringProp<TabbarShape>('default'),
    /**
     * 激活标签的颜色
     */
    activeColor: String,
    /**
     * 未激活标签的颜色
     */
    inactiveColor: String,
    /**
     * 固定在底部时，是否在标签位置生成一个等高的占位元素
     */
    placeholder: makeBooleanProp(false),
    /**
     * 自定义组件的层级
     */
    zIndex: makeNumberProp(99),
}

export type TabbarProps = ExtractPropTypes<typeof tabbarProps>
